<template>
  <!-- 有省略号显示tooltip,没有省略号不显示tooltip 全局组件-->
  <div>
    <el-tooltip
      :disabled="tooltipDisabled"
      :content="content.toString()"
      placement="top-start"
    >
      <div
        ref="elipsisDom"
        class="text-ellipsis"
        @mouseenter="spanMouseenter($event)"
      >
        {{ content }}
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: 'eltooltip',
  props: ['content'],
  data () {
    return {
      tooltipDisabled: true
    }
  },
  methods: {
    textRange (el) {
      const textContent = el
      const targetH = textContent.getBoundingClientRect().height // dom高度
      let range = document.createRange()
      range.setStart(textContent, 0)
      range.setEnd(textContent, textContent.childNodes.length)
      const rangeH = range.getBoundingClientRect().height // 文本高度
      range.detach() // 从文档中分离
      range = null // 解除引用
      // console.log(rangeH,rangeH);
      return rangeH > targetH
    },
    spanMouseenter (ev) {
      // this.tooltipDisabled = !this.textRange(ev.target)
      // console.log(ev.target.clientWidth,ev.target.scrollWidth);
      if (ev.target.clientWidth < ev.target.scrollWidth) {
        this.tooltipDisabled = false
      } else {
        this.tooltipDisabled = true
      }
    }
  }
}
</script>
<style scoped>
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 1;  */
}
</style>
